<template>
	<div class="create-article-page">
		<div>
			<el-text type="primary">文章内容</el-text>
		</div>
		<div id="vditor"></div>
		<div class="my-2">
			<el-text type="primary">文章封面链接</el-text>
			<br />
			<el-image style="height: 160px" :src="articleCover" />
			<br />
			<el-input v-model="articleCover" placeholder="请输入文章封面链接" />
			<br />
			<single-upload class="mt-2" :handle-upload="handleUpload" />
		</div>
		<div class="my-2">
			<el-text type="primary">文章标题</el-text>
			<el-input v-model="articleTitle" placeholder="请输入文章标题" />
		</div>
		<div class="my-2">
			<el-text type="primary">文章分类</el-text>
			<el-select v-model="articleCategory" placeholder="请选择分类">
				<el-option
					v-for="item in categories"
					:label="item.name"
					:value="item._id"
					:key="item._id" />
			</el-select>
		</div>
		<div class="my-2 flex">
			<el-text type="primary">是否置顶</el-text>
			<div class="mx-2"></div>
			<el-switch v-model="isTop" />
		</div>
		<div class="my-2 w-full">
			<el-button class="w-full" type="primary" @click="d_handleUpdate"> 保存修改 </el-button>
		</div>
	</div>
</template>

<script name="UpdateArticlePage" lang="ts" setup>
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import type { ICategory } from '~/server/models/category.model';
import SingleUpload from '~/components/UploadCom/SingleUpload/index.vue';

const route = useRoute();
const router = useRouter();
const articleId = route.query.id as string;

const vditor = ref<any>();
const articleContent = ref<string>('');
const articleCover = ref<string>('');
const articleTitle = ref<string>('');
const articleCategory = ref<string>('');
const isTop = ref<boolean>(false);
const categories = ref<ICategory[]>([]);

const handleUpload = (file: any): void => {
	const form = new FormData();
	form.append('files', file);
	$fetch('/api/admin/file/upload', {
		method: 'POST',
		body: form,
	}).then((res: any) => {
		articleCover.value = res.data[0].url;
	});
};

const handleUpdate = (): void => {
	$fetch('/api/admin/article/update', {
		method: 'PATCH',
		body: {
			id: articleId,
			title: articleTitle.value,
			content: articleContent.value,
			cover: articleCover.value,
			categoryId: articleCategory.value,
			isTop: isTop.value,
		},
	}).then((res: any) => {
		if (res.code === 1) {
			ElMessage.success('更新成功');
			router.push('/admin/article');
		} else {
			ElMessage.error(res.message);
		}
	});
};
const d_handleUpdate = useDebounce(handleUpdate, 500);

const fetchCategories = async () => {
	const res: any = await $fetch('/api/client/category/list');
	if (res.code === 1) {
		categories.value = res.data.list;
	} else {
		ElMessage.error(res.message);
	}
};

const fetchArticleDetail = async () => {
	if (!articleId) {
		ElMessage.error('缺少文章ID');
		router.replace('/admin/article');
		return;
	}
	const res: any = await $fetch('/api/client/article/detail', {
		query: { id: articleId },
	});
	if (res.code === 1) {
		const data = res.data;
		articleTitle.value = data.title;
		articleContent.value = data.content;
		articleCover.value = data.cover;
		articleCategory.value = data.categoryId;
		isTop.value = data.isTop;
		// 初始化 Vditor
		nextTick(() => {
			const vditorDiv = document.getElementById('vditor');
			vditor.value = new Vditor(vditorDiv as HTMLDivElement, {
				height: '100%',
				cache: { enable: false },
				input: (text: string) => {
					articleContent.value = text;
				},
				theme: 'classic',
				value: articleContent.value,
			});
		});
	} else {
		ElMessage.error(res.message);
		router.push('/admin/article');
	}
};

onMounted(async () => {
	await fetchCategories();
	await fetchArticleDetail();
});
</script>
